<template>
  <el-form-item
      prop="xAxis"
      label="横轴纬度"
   >
      <el-select
        style='width:150px'
        v-model.trim ='xAxis'
        clearable
        @change ='changeVal'
        @clear ='clearAll'  
        class='plus-icon-select'
       >
        <el-option 
          v-for='(k,i) in selectList'
          :label='k.label'
          :value='k.value'
          :key='i'
        >
        </el-option>
      </el-select> 

      <div class="add-wrap">

        <education-checkbox 
          tagName='学历'
          :visible.sync='visible.education'
          @getSelected ='(val)=>{
            this.education = val.education;
            this.educationTitle = val.educationTitle
            this.emitXoption()}'
        />
       
        <x-time 
          class="workage"
          :visible.sync='visible.workage'
          tagName ='工龄'  
          @getTime='(val)=>{ this.workage = val;this.emitXoption()}'
        />

        <x-checkbox 
          tagName='性别'
          :visible.sync='visible.sex'
          :selectList='sexSelectList'
          @getSelected ='(val)=>{this.sex = val;this.emitXoption()}'
        />

        <x-time 
          class="age"
          :visible.sync='visible.age'
          tagName ='年龄'  
          @getTime='(val)=>{ this.age = val;this.emitXoption()}'
        />
      

        <x-checkbox 
          tagName='职务职责'
          :spanWidth='160'
          :visible.sync='visible.zhiwuzhize'
          :selectList='zhiwuzhizeSelectList'
          @getSelected ='(val)=>{this.zhiwuzhize = val;this.emitXoption()}'
        />
  
        <x-checkbox 
          tagName='婚姻状况'
          :visible.sync='visible.marry'
          :selectList='marrySelectList'
          @getSelected ='(val)=>{this.marry = val;this.emitXoption()}'
        />

        <x-checkbox 
          tagName='招聘渠道'
          :spanWidth='160'
          :visible.sync='visible.join'
          :selectList='joinSelectList'
          @getSelected ='(val)=>{this.join = val;this.emitXoption()}'
        />

        <x-checkbox 
          tagName='岗位大类'
          :spanWidth='160'
          :visible.sync='visible.post'
          :selectList='postSelectList'
          @getSelected ='(val)=>{this.post = val;this.emitXoption()}'
        />
      
        <x-time 
          class="group"
          :visible.sync='visible.group'
          tagName ='集团服务年限'  
          margin='margin-right:23px'
          @getTime='(val)=>{ this.group = val;this.emitXoption()}'
        />

        <x-time 
          class="company"
          :visible.sync='visible.company'
          tagName ='本公司服务年限'  
          margin='margin-right:11px'
          @getTime='(val)=>{ this.company = val;this.emitXoption()}'
        />

      </div>

    </el-form-item>
</template>

<script>
import Vue from 'vue'
import { InputNumber, MessageBox, Checkbox, CheckboxGroup } from 'element-ui'
import XTime from './xTime'
import XCheckbox from './xCheckbox'
import EducationCheckbox from './education'
Vue.use(InputNumber)
Vue.use(Checkbox)
Vue.use(CheckboxGroup)
import Bus from './bus'
import {
	educationSelectList,
	sexSelectList,
	marrySelectList,
	zhiwuzhizeSelectList,
	joinSelectList,
	postSelectList,
	selectList
} from './selectList'


export default {
	components: {
		XTime,
    XCheckbox,
    EducationCheckbox
	},
	data () {
		return {
			educationSelectList,
			sexSelectList,
			marrySelectList,
			zhiwuzhizeSelectList,
			joinSelectList,
			postSelectList,
			selectList,
			xAxis: '',
			backToxAxis: '',
			visible: {
				education: false,
				workage: false,
				sex: false,
				age: false,
				zhiwuzhize: false,
				marry: false,
				join: false,
				post: false,
				group: false,
				company: false,
			},
			age: '',
			workage: '',
			group: '',
			company: '',
      education: '',
      educationTitle:'',
			sex: '',
			marry: '',
			zhiwuzhize: '',
			join: '',
			post: ''
		}
	},
	computed: {
		// 横轴纬度已选择的select
		countfieldNameType () {
			const arr = []
			for (const key in this.visible) {
				if (this.visible[key]) {
					switch (key) {
					case 'education':
						arr.push('A')
						break
					case 'workage':
						arr.push('B')
						break
					case 'sex':
						arr.push('C')
						break
					case 'age':
						arr.push('D')
						break
					case 'zhiwuzhize':
						arr.push('E')
						break
					case 'marry':
						arr.push('F')
						break
					case 'join':
						arr.push('G')
						break
					case 'post':
						arr.push('H')
						break
					case 'group':
						arr.push('I')
						break
					case 'company':
						arr.push('J')
						break
					}
				}
			}
			return arr.join(',')
		}
	},
	watch: {
		xAxis (newValue, oldValue) {
			this.backToxAxis = newValue == '' ? oldValue : newValue
		},
    		// 判断是x轴子条件是否全部关闭,如果true清空x轴值

		visible: {
			handler (newValue) {
				let resultBool = false
				for (const key in newValue) {
					newValue[key] && (resultBool = true) 
				}
				!resultBool &&  (this.xAxis = '')
			},
			deep: true
		}
	},
	methods: {
		handleClose (type) {
			this.visible[type] = false
			if (type === 'age' || type === 'workage' || type === 'group' || type === 'company') {
			} else {
				const select = `${type}Select`
				this[select] = []
			}
			this.emitXoption()
		},

		emitXoption () {

			const xOption = {
        educationSelect: this.education,
        educationTitle:this.educationTitle,
				sexSelect: this.sex,
				marrySelect: this.marry,
				zhiwuzhizeSelect: this.zhiwuzhize,
				joinSelect: this.join,
				postSelect: this.post,
				age: this.age,
				workage: this.workage,
				group: this.group,
				company: this.company,
				countfieldNameType: this.countfieldNameType
			}
			Bus.$emit('xOption', xOption)
		},

		getLabelFormVal (val) {
			switch (val) {
			case 'A':
				return 'education'
				break

			case 'B':
				return 'workage'
				break

			case 'C':
				return 'sex'
				break

			case 'D':
				return 'age'

				break

			case 'E':
				return 'zhiwuzhize'

				break


			case 'F':
				return 'marry'
				break

			case 'G':
				return 'join'
				break

			case 'H':
				return 'post'
				break

			case 'I':
				return 'group'
				break
			case 'J':
				return 'company'
				break
			}
		},
		changeVal (val) {
			val && (this.visible[this.getLabelFormVal(val)] = true)
			Bus.$emit('xAxis', val)
		},
		clearAll () {
			this.xAxis = this.backToxAxis
			MessageBox.confirm('该操作将清除横轴纬度的所有选项,是否继续', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {

					this.xAxis = ''

					// 清空所有子条件
					for (const key in this.visible) {

						this.handleClose(key)
					}

				})
				.catch(() => {

				})

		},

	}


}
</script>

<style scoped lang='less'>
.add-wrap {
  overflow: hidden;
}
</style>

<style>

</style>
